HTML Tables

HTML tables allow you to organize and display data in a structured format using rows and columns. The <table> element is used to create tables in HTML, containing various child elements for rows, headers, and data.

Basic Table Structure

A simple HTML table consists of the following elements:

<table>: Defines the table.

<tr> (Table Row): Represents a row in the table.

<th> (Table Header): Defines header cells.

<td> (Table Data): Represents data cells.

<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Ahmad</td>
<td>20</td>
<td>Nigeria</td>
</tr>
<tr>
<td>Fateema</td>
<td>18</td>
<td>Nigeria</td>
</tr>
</table>
</body>
</html>

Table Rows and Cells

Each <tr> element represents a row, while <td> represents individual data cells.

Table Headers (<th>) vs Table Data (<td>)

<th> elements make text bold and center-aligned by default.

<td> elements contain regular data.

Table Borders

To add a border, use the `border` attribute or CSS

<!DOCTYPE html>
<html>
<body>
<table style="border-collapse: collapse; width: 100%;">
<tr>
<th style="border: 1px solid black; padding: 10px;">Header</th>
<td style="border: 1px solid black; padding: 10px;">Data</td>
</tr>
</table>
</body>
</html>

Merging Cells: `colspan` and `rowspan`

`colspan` merges columns.

`rowspan` merges rows.

<!DOCTYPE html>
<html>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: lightgray;
}
</style>
<body>
<table border="1">
<tr>
<th colspan="2">Merged Column</th>
</tr>
<tr>
<td rowspan="2">Merged Row</td>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
</tr>
</table>
</body>
</html>

Table Sections

<thead> Groups header content.

<tbody>: Groups table body.

<tfoot>: Groups footer.

<!DOCTYPE html>
<html>
<body>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abdullahi</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total: 2 entries</td>
</tr>
</tfoot>
</table>
</body>
</html>

Responsive Tables

Use `overflow-x: auto;` to make tables scrollable on small screens

<!DOCTYPE html>
<html>
<body>
<style>
.table-container {
overflow-x: auto;
}
</style>
<div class="table-container">
<table>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Phone</td>
<td>$500</td>
</tr>
</table>
</div>
</body>
</html>

Best Practices

Use <th> for headers.

Use `border-collapse: collapse;` for a clean look.

Use `colspan` and `rowspan` for complex structures.

Make tables responsive for smaller screens.

Days of the Week
English	Saturday	Sunday	Monday	Tuesday	Wednesday	Thursday	Friday
Hausa	Asabar	Lahadi	Litinin	Talata	Laraba	Alhamis	Juma'a

*HTML Tables*

HTML tables allow you to organize and display data in a structured format using rows and columns. The <table> element is used to create tables in HTML, containing various child elements for rows, headers, and data.

Basic Table Structure

A simple HTML table consists of the following elements:

<table>: Defines the table. <tr> (Table Row): Represents a row in the table. <th> (Table Header): Defines header cells. <td> (Table Data): Represents data cells.

Table Rows and Cells

Each <tr> element represents a row, while <td> represents individual data cells.

Table Headers (<th>) vs Table Data (<td>)

<th> elements make text bold and center-aligned by default. <td> elements contain regular data.

Table Borders

To add a border, use the `border` attribute or CSS

Merging Cells: `colspan` and `rowspan`

`colspan` merges columns. `rowspan` merges rows.

Table Sections

<thead> Groups header content. <tbody>: Groups table body. <tfoot>: Groups footer.

Responsive Tables

Use `overflow-x: auto;` to make tables scrollable on small screens

Best Practices

Use <th> for headers. Use `border-collapse: collapse;` for a clean look. Use `colspan` and `rowspan` for complex structures. Make tables responsive for smaller screens.

Can you try it?

HTML Tables

<table>: Defines the table.

<tr> (Table Row): Represents a row in the table.

<th> (Table Header): Defines header cells.

<td> (Table Data): Represents data cells.

<th> elements make text bold and center-aligned by default.

<td> elements contain regular data.

`colspan` merges columns.

`rowspan` merges rows.

<thead> Groups header content.

<tbody>: Groups table body.

<tfoot>: Groups footer.

Use <th> for headers.

Use `border-collapse: collapse;` for a clean look.

Use `colspan` and `rowspan` for complex structures.

Make tables responsive for smaller screens.